<template>  
  <el-container>
    <el-header style="height:60px; border-bottom: 1px solid #eee;">  
      <div style="float:left;width:240px;height:50px;font-size: 36px;margin-top:5px">图书类型管理</div>
      <div style="float:left;width:80px;height:30px;text-align:bottom;margin-top:25px">
         <el-button
            size="mini"  type="primary"
            @click="addBookType()">增加图书类型</el-button></div>
    </el-header>

    <el-main>
    <el-table
      :data="tableData.filter(data => !search || data.id.toLowerCase().includes(search.toLowerCase()))"
      style="width: 60%"
      max-height="680"> 
      <el-table-column
        prop="id"
        label="ID"
        min-width="12%">
      </el-table-column>       
      <el-table-column
        prop="bookType"
        label="图书类型"
        min-width="12%">
      </el-table-column>

      <el-table-column min-width="28%" align="center">
         
         <template #default="{ row }">            
           <el-button
             size="mini"
             type="danger"
             @click="handleDelete(row)">
             删除</el-button>
         </template>
       </el-table-column>

    </el-table>
    </el-main>
        <AddBookType @onReload = "addBookType" ref="addBookType"></AddBookType> 
  </el-container>  
</template>
<script>
import AddBookType from "./addBookType.vue"
export default {
name: 'BookType',
components:{ AddBookType },
data() {
  return {  
      loading: false,         
      search: '', 
      tableData: [],               
    }        
 },
methods: { 
  getAllBookType(){ 
    this.$api.post('bookType/getAllBookType', null).then((res) => {                        
      if (res.code === 200) {     
          this.tableData = res.data.sort((a, b) => a.id - b.id);
        } else {
          alert('获取用户数据失败!')
        }
        })              
  },
  addBookType(){
      //alert('addBookType dialog')        
      this.$refs.addBookType.dialogFormVisible = true
      this.getAllBookType()
  },
  handleDelete(row) {
      this.$confirm('此操作将永久删除该图书类型, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '确认删除!'
          });
          let data = {
            id: row.id,
            bookType: row.bookType,
          }        
          this.$api.post('bookType/deleteBookType', data)
              .then(res => { 
                if (res.code === 200) {                   
                  this.getAllBookType()                 
                }              
              })              
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })          
        }) 
      } 
 },
 
 mounted: function () {     
   this.getAllBookType()
} ,

}
</script>